<template>
  <div>
    <div id="containerLine"></div>
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css"
export default {
  name: "lineMap",
  props: ['lineData'],
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  created() {
    // this.initMap();
  },
  methods: {
    // 初始化地图
    // initMap() {
    //   var map = new AMap.Map("containerLine", {
    //     zoom: 12, //级别
    //     center: [114.477345, 38.043295], //中心点坐标
    //     //  mapStyle: 'amap://styles/macaron',
    //   });
    //   let that=this
    //   AMap.plugin("AMap.Driving", function () {
    //     var driving = new AMap.Driving({
    //       map:map,
    //       // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    //       policy: AMap.DrivingPolicy.LEAST_TIME,
    //     });

    //     var startLngLat = [that.lineData.fromlon,that.lineData.fromlat];
    //     var endLngLat = [that.lineData.tolon,that.lineData.tolat];

    //     driving.search(startLngLat, endLngLat, function (status, result) {
    //       // 未出错时，result即是对应的路线规划方案
    //     });
    //   });
    // },
    initMap() {
      console.log(this.lineData)

      let that = this

      let map = L.map("containerLine", {
        minZoom: 3,
        maxZoom: 15,
        center: [that.lineData.fromlat, that.lineData.fromlon],
        zoom: 15,
        zoomDelta: 0.5,
        fullscreenControl: false,
        zoomControl: false,
        attributionControl: false
      });
      this.map = map;
      //http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}//arcgis在线地图
      this.baseLayer = L.tileLayer("https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
        attribution: '&copy; 高德地图',
        maxZoom: 15,
        minZoom: 3,
        subdomains: "1234"
      });
      this.map.addLayer(this.baseLayer);
      this.addMarker()
      this.addPolygon()
    },
    addMarker() {
      let that = this

      //设置图标样式
      var myIcon = L.icon({
        iconUrl: require('../../../assets/start.png'),
        iconSize: [30, 30],
      });
      let marker = L.marker([that.lineData.fromlat, that.lineData.fromlon], {
        icon: myIcon
      }).addTo(this.map)
      // marker.bindPopup(that.position.title);

      //设置图标样式
      var myIcon = L.icon({
        iconUrl: require('../../../assets/end.png'),
        iconSize: [30, 30],
      });
      let marker2 = L.marker([that.lineData.tolat, that.lineData.tolon], {
        icon: myIcon
      }).addTo(this.map)
      // marker2.bindPopup(that.position.title);
    },
    addPolygon() {
      let that = this
      var points = [[that.lineData.fromlat, that.lineData.fromlon], [that.lineData.tolat, that.lineData.tolon]]
      var polygon = L.polygon(points, {
        color: '#aa0000', fillColor: '#ff15c9',
        weight: 2
      }).addTo(this.map);
    },
  },
};
</script>

<style scoped>
#containerLine {
  width: 100%;
  height: 50vh;
}
</style>